<button class="text-gray-500 w-8 h-8 relative focus:outline-none bg-white" @click="menuIsOpen = !menuIsOpen">
  <span class="sr-only">Open main menu</span>
  <div class="block w-5 absolute left-1/2 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
    <span aria-hidden="true" class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'rotate-45': menuIsOpen,' -translate-y-1.5': !menuIsOpen }"></span>
    <span aria-hidden="true" class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'opacity-0': menuIsOpen } "></span>
    <span aria-hidden="true" class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out" :class="{'-rotate-45': menuIsOpen, ' translate-y-1.5': !menuIsOpen}"></span>
  </div>
</button>
